<template>
  <div class="login-one">
    <!-- 用户登录 -->
    <el-form v-show="showAccount" class="demo-ruleForm" label-width="80px"
             style="background-color: white;width: 500px;position: fixed;left:35%;top:30%;border-radius: 10px;">
      <h1 align="center">草药园后台管理系统</h1>

      <el-form-item label="用户名" prop="userName">
        <el-col :span="22">
          <el-input v-model="user.userName"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-col :span="22">
          <el-input v-model="user.password" show-password></el-input>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-user-solid" type="success" size="mini" @click="userLogin">登录</el-button>
<!--        <el-button type="success" size="mini" @click="showAccount=false;showCode=true">验证码登录</el-button>-->
      </el-form-item>
    </el-form>

    <!-- 验证码登录 -->
    <el-form v-show="showCode" class="demo-ruleForm" label-width="80px"
             style="background-color: white;width: 500px;position: fixed;left:35%;top:30%;border-radius: 10px;">
      <h1 align="center">人力资源管理系统</h1>

      <el-form-item label="邮箱" prop="email">
        <el-col :span="22">
          <el-input v-model="codeLogin.email"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="验证码" prop="code">
        <el-col :span="22">
          <el-input v-model="codeLogin.code" show-password></el-input>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="success" size="mini" @click="sendCode">发送验证码</el-button>
        <el-button :loading="loading" icon="el-icon-user-solid" type="success" size="mini" @click="loginCode">登录</el-button>
        <el-button type="success" size="mini" @click="showAccount=true;showCode=false">账号登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import {login} from '@/api/user'

export default {
  name: 'Login',
  data() {
    return {
      user: {
        userName: "张三",
        password: "123456"
      },
      codeLogin: {
        email: "",
        code: ""
      },
      loading: false,
      showAccount: true,//是否显示账号登录页面
      showCode: false, //是否显示验证码登录页面
      redirect: undefined,

    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    userLogin() {//登录
      const self = this;

      if (this.user.userName && this.user.password) {
        this.$store.dispatch("user/login", this.user).then(() => {

          localStorage.setItem("userName", this.user.userName);

          this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
        }).catch(() => {
          this.loading = false;
        });
      } else if (this.user.userName == null || this.user.userName == undefined || this.user.userName == '') {
        self.$message({"message": "账号为空", "type": "error"});
      } else if (this.user.password == null || this.user.password == undefined || this.user.password == '') {
        self.$message({"message": "密码为空", "type": "error"});
      }
    },
    sendCode() {
      const self = this;
      $.ajax({
        url: "/userInfo/sendCode",
        type: "get",
        data: this.codeLogin,
        success: function (rs) {
          self.$message({"message": rs.msg, "type": "success"});
        }
      })
    },
    loginCode() {
      const self = this;
      $.ajax({
        url: "/userInfo/loginCode",
        type: "get",
        data: this.codeLogin,
        success: function (rs) {
          if (rs.code == 200) {
            //把用户名存入到本地存储里
            localStorage.setItem("userName", self.codeLogin.email);
            //跳转到index页面
            window.location.href = "index.html";
          } else {
            //提示
            self.$message({"message": rs.msg, "type": "success"});
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-one {
  background-image: url(../../assets/image/login1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  height: 100%;
}

</style>
